<template>
    <div id="as-member-lists" class="list" :style="{height: `${height}px`}">
        <div id="as-member-list-all" class="list-div">
            <ul class="list-ul">
                <li 
                class="association-member-li"
                v-for="item in list"
                :key="item.userId">
                    <div class="association-member-li-top">
                        <div class="association-member-li-left">
                            <user-head-img :userId="item.userId" class="head-img" :userImg="item.headImg" :width="45" :height="45" />

                            <image-vant v-if="item.userType > 0" class="comittee-exp-icon" :height="15" :width="'100%'" :src="item.sex == 1 ? images.norComitteeIcon : images.norComitteeWomenIcon" /> 
                            <!-- <image-vant v-if="item.userType > 0" :height="15" :width="'100%'" :src="images.norComitteeIcon"> -->
                        </div>
                        <div class="association-member-li-right">
                            <div class="association-member-li-right-top">
                                <div class="association-member-li-right-top-left">
                                    <span class="user-name">{{item.nickName}}</span> 
                                </div>
                            </div>
                            <div class="association-member-li-right-bottom">
                                <span>
                                    <help-earch-icon v-if="item.isPartner" :text="''"></help-earch-icon>
                                </span>
                                <div>
                                    <span @click="enterUserBusPage(item.userId)" v-if="item.isRestricted == 0 && item.isBusiness" class="user-card user-card-blue">名片</span>
                                    <span v-else-if="item.isRestricted == 1" class="user-restricted">受限中</span>
                                    <a @click="enterSetBus" v-if="item.isBusiness == 0" class="set-bus">创建名片</a>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div 
                    v-if="item.signature || item.area || item.company || item.joinInfo || item.supply || item.demand || item.yourSelf" 
                    class="user-info-options">
                        <write-option :name="'签名'" :val="item.signature" />
                        <write-option :name="'位置'" :val="item.area" />
                        <write-option :name="'企业'" :val="item.company" />
                        <write-option :name="'介绍'" :val="item.joinInfo" />
                        <write-option :name="'供应'" :val="item.supply" />
                        <write-option :name="'需求'" :val="item.demand" />
                        <write-option :name="'说明'" :val="item.yourSelf" />
                    </div>
                    <div class="user-info-bottom">
                        <div class="user-info-bottom-left">{{item.joinTimeText}}</div>
                        <div class="user-info-bottom-right">
                            <span @click="parise(item.userId)" class="user-info-parise-count-par statistics-item">
                                <image-vant :height="15" :width="15" :src="images.praiseCountIcon" /> 
                                <span class="statistics-item-count user-info-parise-count">{{item.praise}}</span>
                            </span>
                            <span @click="comment(item.userId, item.userNumber)" class="user-info-comment-count-par statistics-item">
                                <image-vant class="comment-icon" :height="15" :width="15" :src="images.leaveMessageGrayIcon" /> 
                                <span class="statistics-item-count user-info-comment-count">{{item.gustBook}}</span>
                            </span>
                            <span @click="setComplainShow(item.userId)" class="other-icon-show statistics-item">
                                <van-icon name="weapp-nav" />
                                <div v-show="complainShow === item.userId" class="other-icon-function-complain other-icon-function">投诉</div>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="info-empty"></div>
        </div>
        <!-- 绑定微信弹窗 -->
        <bind-wechat-window 
        :message="bindWechat.message"
        :isShow="showWindow === 'bindWechat'" 
        @closeBindWechatWindow="hideOverlay"
        />

        <!-- 未设置业务名片弹窗 -->
		<need-set-bus-window
		:textOne="needSetBus.message"
		:textSecond="needSetBus.messageTwo"
		:closeBtnText="needSetBus.closeBtnText"
		:sureBtnText="needSetBus.sureBtnText"
		:isShow="showWindow === 'setBus'"
		:overlayShow="isShowOverlay"
		@hideOverlay="hideOverlay"
		></need-set-bus-window>

		<van-overlay :show="isShowOverlay" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义组件
import UserHeadImg from '_components/project/common/UserHeadImg'
import HelpEarchIcon from '_components/project/common/HelpEarchIcon'
import SexIcon from '_components/project/common/SexIcon'
import ImageVant from '_components/project/common/ImageVant'
import WriteOption from '_components/project/AsMemberList/WriteOption'
import BindWechatWindow from '_components/project/ShowWindow/BindWechatWindow'
import NeedSetBusWindow from '_components/project/ShowWindow/NeedSetBusWindow'

// 自定义方法
import { failTextVantToa } from "_projectFn/prompt"
import { enterUserBus, enterUserSet, enterLeaveMessage } from "_projectFn/page"
import { getProImg } from "_projectFn/images"
import { getAsMemberList, toParise } from "_network/request"
import { isLoginChose } from "_projectFn/login" 

// 本地图片
import scrollTop from '_assets/img/mescroll-totop.png'
import emptyContentImg from '_assets/img/empty-content-img.svg'
import norComitteeImg from '_assets/img/nor-comittee-man-icon.svg'
import norComitteeWomenImg from '_assets/img/nor-comittee-women-icon.svg'
import praiseCountImg from '_assets/img/praise-icon.svg'
import leaveMessageGrayImg from '_assets/img/leave-message-gray-icon.svg'

// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

// UI组件
import { Overlay } from 'vant'

// Vue
import Vue from 'vue'
Vue.use(Overlay)

export default {
    name: 'AsList',
    props: {
        listData: {
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 500,
        },
        pageBasicData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            mescroll: null,
            images: {
                scrollTopIcon: getProImg('mescroll-totop.png', scrollTop),
                emptyContentIcon: getProImg("sex-women-icon.svg", emptyContentImg),
                norComitteeIcon: getProImg("nor-comittee-man-icon.svg", norComitteeImg),
                norComitteeWomenIcon: getProImg("nor-comittee-women-icon.svg", norComitteeWomenImg),
                praiseCountIcon: getProImg("praise-icon.svg", praiseCountImg),
                leaveMessageGrayIcon: getProImg("leave-message-gray-icon.svg", leaveMessageGrayImg),
            },
            request: {
                total: 0,
                viewGroupUserItemPage: null, // 登录用户且设置业务名片但未绑定微信用户查看社群群成员列表最大页数
            },
            showWindow: '',
            isShowOverlay: false,
            complainShow: '', // 显示的投诉
            bindWechat: { // 绑定微信弹窗配置
                message: `30秒绑定微信，即可查看更多！\n同时为您开通微信群业务信息展示权限！`
            },
            needSetBus: {
                message: '1分钟创建业务名片，查看更多！',
                messageTwo: '同时为您开通社群业务信息展示权限！',
                closeBtnText: '关闭',
                sureBtnText: '创建业务名片',
            },
        }
    },
    methods: {
        // 显示绑定微信弹窗
        showBindWechat() {
            this.showWindow = 'bindWechat'
        },
        // 点击评论图标
        comment(userId, userNo) {
            if (userId && userNo) {
                // 进入评论页面
                enterLeaveMessage({
                    type: 'associationMember',
                    no: this.$route.query.asNo,
                    userNo,
                })
            }
        },
        // 点击点赞图标
        parise(userId) {
            if (isLoginChose()) {
                const that = this
                toParise({
                    sourceNo: that.$route.query.asNo,
                    fromId: userId,
                    source: 21,
                    callback(data) {
                        if (data >= 0 && typeof Number(data) === 'number') {
                            that.$emit('setPariseCount', {
                                userId,
                                count: data,
                            })
                        }
                    }
                })
            }
        },
        // 点击更多，显示、隐藏投诉
        setComplainShow(userId) {
            if (userId && userId != this.complainShow) {
                this.complainShow = userId
            } else {
                this.complainShow = ''
            }
        },
        // 进入用户业务详情页面
        enterUserBusPage(userId) {
            enterUserBus({
                userId
            })
        },
        // 进入设置业务详情页面
        enterSetBus() {
            enterUserSet('business')
        },
        showOverlay(windowName) {
            if (windowName) {
                this.isShowOverlay = true
                this.showWindow = windowName
            }
        },
        hideOverlay() {
            // console.log('hideOverlay')
            this.isShowOverlay = false
            this.showWindow = ''
        },
        downCallback() {},
        upCallback(page) {
            // console.log('this.pageBasicData', this.pageBasicData)
            if (typeof this.request.viewGroupUserItemPage === 'number' && page.num >= this.request.viewGroupUserItemPage + 1 && this.pageBasicData.bindWechat == 0) {
                this.showBindWechat() // 显示绑定微信弹窗
                this.mescroll.endErr()
                return
            }
            getAsMemberList({
                asNo: this.$route.query.asNo,
                page: page.num,
                pageSize: page.size,
            })
            .then(res => {
                console.log("获取社群群成员列表 res：", res)
                if (res.errcode == 0) {
                    if (Array.isArray(res.data.UserItem) && res.data.UserItem.length > 0) {
                        this.$emit('addList', res.data.UserItem)
                        this.$emit('setPageBasicData', res.data)
                    }
                    this.request.viewGroupUserItemPage = 1
                    // this.request.viewGroupUserItemPage = res.data.ViewGroupUserItemPage || 0
                    this.request.total = res.total || 0
                    this.mescroll.endBySize((res.data.UserItem && res.data.UserItem.length) || 0, this.request.total)
                } else {
                    this.mescroll.endErr()
                    if (this.list.length === 0) {
                        this.mescroll.showEmpty()
                    }
                    if (res.errcode == 1003) { // 显示绑定微信
                        this.showBindWechat() // 显示绑定微信弹窗
                    } else if (res.errcode == 1002) { // 显示设置业务名片
                        this.showSetBus()
                    }
                }
            }, res => {
                console.log("获取社群群成员列表 fail: res", res)
                if (res.errcode != 2000) {
                    failTextVantToa("服务器正在修整，请稍后")
                }
                this.mescroll.endErr()
            })
            .catch(res => {
                console.log("获取社群群成员列表 catch：res", res)
                failTextVantToa("服务器正在修整，请稍后")
                this.mescroll.endErr()
            })
            .finally(() => {
                this.$emit('setPageBasiced')
            })
        },
        // 显示设置业务名片弹窗
        showSetBus() {
            this.showWindow = 'setBus'
        },
    },
    mounted() {
        if (this.$route.query.asNo) {
            const that = this
            that.mescroll = new MeScroll(document.getElementById('as-member-list-all'), {
                down: {
                    auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
                    callback: that.downCallback, // 下拉刷新的回调 
                    isLock: true,
                },
                up: {
                    auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                    callback: that.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 20, // 每页数据的数量
                    },
                    noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                    toTop: { // 配置回到顶部按钮
                        src: that.images.scrollTopIcon
                    },
                    htmlNodata: '<div class="is-all-data">已显示全部</div>',
                    warpClass: 'mescroll-upwarp',
                    empty: {
                        //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                        warpId:	`info-empty`, //父布局的id (1.3.5版本支持传入dom元素)
                        icon: that.images.emptyContentIcon, //图标,默认null,支持网络图
                        tip: "没有相关信息内容" //提示
                    },
                }
            })
        } else {
            this.failTextVantToa('链接参数有误')
        }
    },
    computed: {
        list() {
            return [...this.listData]
        },
    },
    components: {
        UserHeadImg,
        HelpEarchIcon,
        SexIcon,
        ImageVant,
        WriteOption,
        BindWechatWindow,
        NeedSetBusWindow,
    },
}
</script>

<style lang="scss" scoped>
#as-member-list {
    overflow-y: scroll;

    .list-div {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    /* 用户信息列表 */
    .association-member-li {
        padding: 15px;

        &:not(:last-child) {
            border-bottom: 4px solid #eeeeee;
        }

        .association-member-li-top {
            display: flex;
            align-items: center;
        }

        .association-member-li-left {
            flex-shrink: 0;
            position: relative;
            width: 45px;
            height: 45px;

            .head-img {
                height: 100%;
                width: 100%;
            }

            .comittee-exp-icon {
                position: absolute;
                width: 100%;
                height: 15px;
                bottom: -2px;
                left: 0;
            }
        }

        .user-img-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 1px solid #f2f2f2;
            cursor: pointer;
        }

        .user-img-explain {
            position: absolute;
            display: block;
            width: 100%;
            text-align: center;
            background: #ff6600;
            color: white;
            font-size: 12px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            bottom: -2px;
            border-radius: 10px;
        }

        .association-member-li-right {
            width: 100%;
            margin-left: 8px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .association-member-li-right-bottom {
                justify-content: space-between;
            }

            .user-tag-icon {
                &:not(:last-child) {
                    margin-right: 5px;
                }
            }

            .user-tag-contribution {
                // position: relative;
                top: 0px;
            }
        }

        .association-member-li-right {
            &>div {
                height: 22px;
                width: 100%;
                display: flex;
                align-items: center;
            }
        }

        .association-member-li-right-top {
            font-weight: bold;
            display: flex;
        }

        .association-member-li-right-top-left {
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
        }

        .statistics-item {
            cursor: pointer;

            :not(:last-child) {
                padding: 0 2px;
            }

            .statistics-item-count {
                margin-left: 5px;
            }

            .comment-icon {
                position: relative;
                top: 2px;
            }
        }

        .user-card {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 100%;
            border-radius: 6px;
            cursor: pointer;
        }

        .help-par-icon {
            margin-right: 2px;
        }

        .user-card-par {
            background: #0077bf;
        }

        .user-card-normal {
            background: #0197dd;
        }

        .user-card-restricted {
            background: #999999;
        }

        .user-signature {
            color: #999999;
        }

        .user-info-icon {
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        .user-restricted {
            color: #999999;
            font-size: 12px;
        }

        .user-card-blue {
            background: #0197dd;
            color: white;
        }

        .user-contribution-level-positive {
            letter-spacing: 0;
            font-size: 12px;
            cursor: pointer;
        }

        .user-contribution-level-text {
            position: relative;
            right: 2px;
            top: 3px;
        }

        .user-info-options {
            margin-top: 6px;
        }

        .options-count-more {
            max-height: 112px;
            overflow: hidden;
        }

        .user-info-option-val {
            color: #333333;
        }

        .user-info-option {
            color: #999999;
            line-height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .user-info-bottom {
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999999;
        }

        .other-icon-show {
            font-size: 18px;
            top: 4px;
            position: relative;
            cursor: pointer;

            .other-icon-function-complain {
                cursor: pointer;
            }
        }

        .statistics-item:not(:last-child)::after {
            content: '|';
            padding: 0 3px;
        }

        .other-icon-function {
            background: #f6f6f6;
            text-align: center;
            height: 30px;
            line-height: 27px;
            padding: 0 15px;
            border-radius: 5px;
            box-shadow: 0px 1px 1px 1px #e4e4e4;
            font-size: 14px;
        }

        .other-icon-function-complain {
            width: 61px;
            position: absolute;
            right: 0;
            top: 18px;
        }
    }
    /* 用户信息列表结束 */
}
</style>

<style lang="scss">
.mescroll-upwarp {
    padding: 0;

    .is-all-data {
        height: 60px;
        text-align: center;
        line-height: 60px;
        background: #eeeeee;
        color: #999999;
        font-size: 12px;
    }
}

.empty-info {
    img {
        width: 120px !important;
    }
}
</style>